<template>
    <div class="page-box">
        <div class="page-search">

            <div>
                <label>单据查询</label>
                <el-input v-model="searchForm.Number" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>客户名称</label>
                <el-select v-model="searchForm.CustomerNumber" style="width: 160px;" placeholder="请选择客户"
                    @change="CustomerChange" allow-create filterable>
                    <el-option v-for="Client in ClientList" :key="Client.CustomerNumber" :label="Client.ClientName"
                        :value="Client.Id"></el-option>
                </el-select>
            </div>

            <div>
                <label>报价人</label>
                <el-select v-model="searchForm.EmployeesId" style="width: 160px;" placeholder="请选择报价人" 
                   @change="EmployeesChange" allow-create filterable>
                    <el-option v-for="Employees in EmployeesList" :key="Employees.Id" :label="Employees.Name"
                        :value="Employees.Id"></el-option>
                </el-select>
            </div>
            <div>
                <label>出库仓</label>
                <el-select v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择出库仓" @change="WarehouseChange"  allow-create
                    filterable>
                    <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName"
                        :value="Warehouse.Id"></el-option>
                </el-select>
            </div>

            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>

        </div>
        <div class="page-section">

            <div class="page-tool">
            </div>
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                <el-table-column fixed prop="Number" label="报价单编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CustomerName" label="客户名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WarehouseName" label="出货仓" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Transfer" label="运输方式" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="EmployeesName" label="报价人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Status" label="报价单状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.Status === 0">草稿</el-tag>
                        <el-tag type="success"  v-else-if="scope.row.Status === 1">已确认</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.Status === 2">已作废</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="CreateTime" label="出库日期" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="操作" :show-overflow-tooltip="true" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" @click="details(scope.row)">明细</el-button>
                        <el-button  type="text" @click="checked(scope.row)">确认选择</el-button>
                    </template>
                </el-table-column>


            </el-table>

            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                        :TotalCount="pageDomain.TotalCount" />

        </div>

        <el-dialog :close-on-click-modal="false" append-to-body :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="65%" >
            <OrderQuoteDetails   :model="model"  v-if="dialogDomain.dialogVisible" />
        </el-dialog>

    </div>
</template>




<script>
import OrderQuoteDetails from './OrderQuoteDetails.vue'
import Pagination from '@/components/Pagination.vue';

export default {
    components: {
        Pagination,
        OrderQuoteDetails
    },
    mounted() {
        this.dataBind();

    },
    data() {
        return {
            ClientList: [],
            EmployeesList: [],
            WarehouseList: [],
            searchForm: {
                Number: '',
                CustomerName: '',
                EmployeesId: '',
                WarehouseId: '',
                Status:'1'
            },
            dialogDomain: {
                title: '报价单明细',
                dialogVisible: false,
                dialogType: 0

            },
            //数据模型
            model: {},
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false
        }
    },
    created() {
        this.GetOrderQuoteSelectData();
    },
    methods: {



        CustomerChange(model) {
            this.model.CustomerNumber = model.Id;
            this.model.CustomerName = model.ClientName;
            console.log(model)
        },
        EmployeesChange(model) {
            this.model.EmployeesId = model.Id;
            this.model.EmployeesName = model.Name;
            console.log(model)
        },
        WarehouseChange(model) {
            this.model.WarehouseId = model.Id;
            this.model.WarehouseName = model.WarehouseName;
            console.log(model)
        },
        details(model) {
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 0;
            this.model = model;
        },
        
        checked(model) {
            this.$http.get('/api/OrderQuote/GetOrderQuotebyId',{
                params:{
                    OrderQuoteId:model.Id,
                    WarehouseId:model.WarehouseId,
                }
            })
            .then(res => {
                this.$emit('callback',model,res.Data);
            })
        },
 


        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.searchForm.Number = '';
            this.searchForm.CustomerName = '';
            this.searchForm.EmployeesId = '';
            this.searchForm.WarehouseId = '';
        },

        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/OrderQuote',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        Number: this.searchForm.Number,
                        CustomerNumber: this.searchForm.CustomerNumber,
                        EmployeesId: this.searchForm.EmployeesId,
                        WarehouseId: this.searchForm.WarehouseId,
                        Status:this.searchForm.Status
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },
        GetOrderQuoteSelectData() {
            this.$http.get('./api/Integrated/GetOrderQuoteSelectData')
                .then(res => {
                    console.log(res.Data);
                    this.ClientList = res.Data.ClientList;
                    this.EmployeesList = res.Data.EmployeesList;
                    this.WarehouseList = res.Data.WarehouseList;

                })

        },
        
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },


    }

}
</script>

<style></style>
